import React from 'react';
import { connect } from 'dva';
import { Form, Modal, Input, Select } from 'antd';

const FormItem = Form.Item;
@Form.create()
@connect(({ module, content, loading }) => ({
  module,
  content,
  loading: loading.models.module,
}))
class DetailOptForm extends React.Component {
  static defaultProps = {
    values: {},
    isEdit: false,
    handleAdd: () => {},
    handleUpdate: () => {},
    handleModalVisible: () => {},
  };

  constructor(props) {
    super(props);
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'module/getAllModules',
    });
  }

  okHandle = () => {
    const { values, isEdit = false, form, handleAdd, handleUpdate } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      if (isEdit) {
        handleUpdate({
          id: values.id,
          ...fieldsValue,
        });
      } else {
        handleAdd({
          ...fieldsValue,
        });
      }
    });
  };

  handleModuleChange = value => {
    const { dispatch, form } = this.props;
    dispatch({
      type: 'content/getContentsByParam',
      payload: { moduleId: value },
    });
    form.setFieldsValue({ contentId: null });
  };

  render() {
    const { isEdit, modalVisible, handleModalVisible, values, form } = this.props;
    const {
      module: { allModules },
      content: { allContents },
    } = this.props;
    return (
      <Modal
        destroyOnClose
        maskClosable={false}
        width={640}
        style={{ top: 20 }}
        bodyStyle={{ padding: '10px 40px' }}
        title={isEdit ? '修改实验' : '新增实验'}
        visible={modalVisible}
        onCancel={() => handleModalVisible(false, false, values)}
        onOk={this.okHandle}
      >
        <FormItem key="name" {...this.formLayout} label="实验名称">
          {form.getFieldDecorator('name', {
            rules: [
              { required: true, message: '请输入实验名称！' },
              { message: '实验名称长度不能超过20个字', min: 1, max: 20 },
            ],
            initialValue: values.name,
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <FormItem key="moduleId" {...this.formLayout} label="业务模块">
          {form.getFieldDecorator('moduleId', {
            rules: [{ required: true, message: '请选择业务模块' }],
            initialValue: values.moduleId,
          })(
            <Select
              placeholder="选择业务模块"
              style={{ width: '100%' }}
              onChange={this.handleModuleChange}
            >
              {allModules &&
                allModules
                  .filter(m => m.status === 1)
                  .map(item => {
                    return (
                      <Select.Option key={item.id} value={item.id}>
                        {item.name}
                      </Select.Option>
                    );
                  })}
            </Select>
          )}
        </FormItem>
        <FormItem key="contentId" {...this.formLayout} label="业务子模块">
          {form.getFieldDecorator('contentId', {
            rules: [{ required: true, message: '请选择业务子模块' }],
            initialValue: values.contentId,
          })(
            <Select placeholder="选择业务子模块" style={{ width: '100%' }}>
              {allContents &&
                allContents
                  .filter(m => m.status === 1)
                  .map(item => {
                    return (
                      <Select.Option key={item.id} value={item.id}>
                        {item.name}
                      </Select.Option>
                    );
                  })}
            </Select>
          )}
        </FormItem>
      </Modal>
    );
  }
}

export default DetailOptForm;
